<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=360, height=600, initial-scale=1.0, user-scalable=false">
	<title>登录</title>
	<link rel="stylesheet" href="../css/login.css">
	<style>
	@media screen and (max-width: 600px) {
		body {
			background: #3CC;
		}
		.show,
		.show-title,
		.show-content,
		footer {
			display: none;
		}
		.form,
		.form form {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			border-radius: 0;
			box-shadow: none;
			background: #3CC;
		}
		.form form input {
			display: block;
			margin: 3% 0 0 7%;
			width: 80%;
		}
	}
	</style>
	<script src="../js/LoginUi.js"></script>
</head>
<body>
	<div class="container">
		<header>
			<h1>聊天室 - 登录</h1>
		</header>
		<section>
			<div class="show">
				<h1 class="show-title">欢迎来到聊天室!</h1>
				<div class="show-content">
					<p>在进入聊天是之前, 您要先登录一下哦~</p>
					<p>首先要输入邮箱, 注意邮箱的格式要输入正确哈! </p>
					<p>然后就是用户名, 用户名是可以随意定的, 相当于是一个昵称啦! </p>
					<p>接着是头像的颜色, 头像将由选择的颜色和昵称组成.</p>
				</div>
			</div>
			<div class="form">
				<form action="javascript:hrefTo();" id="login" method="post">
					<input type="email" id="email" name="email" autocomplete="on" placeholder="邮箱" autofocus/>
					<input type="text" id="username" name="username" autocomplete="off" placeholder="昵称" />
					<input type="color" id="color" name="color" />
					<input type="submit" value="确定" />
					<span id="tishi">Please put in ......</span>
				</form>
			</div>
		</section>
		<footer></footer>
	</div>
	<script>
	var ui = LoginUi();
	window.onresize = function() {
		LoginUi();
	}
	var login = document.getElementById("login");
	var email = document.getElementById("email");
	var username = document.getElementById("username");
	var color = document.getElementById("color");
	var tishi = document.getElementById("tishi");
	login.onsubmit = function check() {
		if (email.value == "" || email.value == null) {
			tishi.innerHTML = "请输入邮箱!";
			email.focus();
			return false;
		}
		if (username.value == "" || username.value == null) {
			tishi.innerHTML = "请输入昵称!";
			username.focus();
			return false;
		}
		sessionStorage.setItem("email", email.value);
		sessionStorage.setItem("username", username.value);
		sessionStorage.setItem("color", color.value);
		return true;
	}
	function hrefTo() {
		window.location.href = "liaotianshi.html";
	}
	</script>
</body>
</html>